<template>
  <div>
      <div class="mui-card" v-for="item in goods" :key="item.id">
      <!--内容区-->
      <div class="mui-card-content">
        <!-- 复选框 -->
        <div class="mui-input-row mui-checkbox mui-left">
          <label>&nbsp;</label>
          <input type="checkbox" 
          v-model="getGoodsSelected[item.id]"
          @change="selectedChanged(item.id,getGoodsSelected[item.id])">
        </div>
        <div class="img-con">
          <img :src="item.image" alt="">
        </div>
        <div class="right">
          <span class="name">{{item.name}}</span>
          <div class="right-bottom">
            <span class="price">￥{{item.price}}</span>
            <numbox :max="item.num" 
            :initCount="getGoodsCount[item.id]" 
            :goodsid="item.id" 
            :size="'min'"
            @count="countChanged"></numbox>
            <a class="remove" @click.prevent="removeGoods(item.id)">删除</a>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card foot">
      <!--页眉，放置标题-->
      <div class="mui-card-content text">总计不含运费</div>
      <!--内容区-->
      <div class="mui-card-content text">
        <div>已勾选商品<span>{{getSelectedCount}}</span>件 总价<span>￥{{totalPrice}}</span></div>
      </div>
      <button class="mui-btn mui-btn-primary" @click="createOrder">去结算</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import numbox from '../components/numbox'
export default {
  components: { numbox },
  data() {
    return {
      // 所有商品
      goods: []
    }
  },computed: {
    // 通过mapState函数的调用，找到shopcart模块中的car属性，将它只作为computed计算属性
    // 数组中的car作为计算属性的名称
    ...mapState('shopcart', ['car']),
    ...mapGetters('shopcart', ['getGoodsCount','getGoodsSelected','getSelectedCount','getSelectedGoods']),
    totalPrice() {
      var total = 0
      this.goods.forEach((item,index) => {
        if (this.getSelectedGoods[item.id] && parseInt(item.id) === parseInt(this.getSelectedGoods[item.id].id)) {
          total += this.getSelectedGoods[item.id].count * item.price
        }
      })
      return total;
    }
  },
  created() {
    this.getShopcart()
  },
  methods: {
    getShopcart() {
      // 获取id数组
      var ids = []
      this.car.forEach(item => {
        ids.push(item.id)
      })
      this.$http.get('shopcart',{params: {ids: ids}}).then(res => {
        // console.log(res.data.data);
        if (res.data.code === 1) {
          this.goods = res.data.data
          this.goods.forEach(item => {
            if (item.num === 0) {
              // 如果没货了 将购物者中的商品之前默认选中状态改为false
              this.selectedChanged(item.id, false)
            }
          })
        } else {
          this.$toast('商品信息获取失败')
        }
      })
    },
    // 改变复选框状态
    selectedChanged(id, selected) {
      this.$store.commit('shopcart/changeSelected', {id,selected})
    },
    // 实时更新选购商品数量
    countChanged(goodsInfo) {
      this.$store.commit('shopcart/updateGoodsInfo', goodsInfo)
    },
    // 删除
    removeGoods(id) {
      // 先删除this.goods里对应的商品，否则会报错 后台和localStorage删除了，但当前页的goods未删除，其它功能可能出现下标越界等问题
      this.goods.some((item,index) => {
        if (item.id === id) {
          this.goods.splice(index,1)
          return true
        }
      })
      this.$store.commit('shopcart/removeById', id)
    },
    // 去结算
    createOrder() {
      if (this.getSelectedCount <= 0) {
        this.$toast('您没有要购买的商品')
        return 
      }
      // 加入到Vuex的buy数组中
      this.$store.commit('shopcart/setBuy')
      this.$router.push({name: 'order_create'})
    }
  }
}
</script>

<style lang="scss" scoped>
.mui-card {
  .mui-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    .mui-checkbox {
      flex: 1;
      height: 30px;
      label {
        padding-left: 20px;
        padding-right: 35px;
        padding-bottom: 22px;
      }
    }
  }
  .img-con {
    flex: 1.5;
    width: 70px;
    padding-top: 5px;
    img {
      width: 100%;
    }
  }
  .right {
    flex: 5;
    padding: 15px 5px;
    .name {
      font-size: 14px;
      color: #000;
      font-weight: 700;
    }
    .right-bottom {
      .price {
        color: crimson;
        font-weight: 700;
      }
      .remove {

      }
    }
  }
  .text {
    padding: 8px 15px;
    color: #666;
    span {
      font-size: 18px;
      color: crimson;
      font-weight: 700;
    }
  }
  .mui-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 40px;
    right: 15px;
    font-size: 16px;
  }
}
</style>